<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小车视频查看</title>
    <link rel="shortcut icon" href="/static/imag/favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" href="/static/css/body.css">
    <style>
        body {
            /* position: relative; 为按钮的绝对定位提供参考 */
        }

        .main-content {
            text-align: left;
            /* 设置内容左对齐 */
        }


        /* 视频播放样式 */
        .video-container {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            /* 使内容左对齐 */
            background-color: var(--status-table-bg-color);
            padding: 20px;
            border-radius: 8px;
            width: 100%;
            /* 使视频容器占满宽度 */
        }

        .video-container select,
        .video-container button {
            margin: 10px 5px;
            padding: 10px 15px;
            background-color: var(--button-bg-color);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            color: var(--text-color);
            font-size: 16px;
        }

        .video-container button:hover {
            background-color: var(--button-hover-bg-color);
        }

        video {
            width: 100%;
            max-width: 800px;
            height: auto;
            border-radius: 8px;
        }

        /* 控制按钮样式 */
        .control-buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            /* 使用绝对定位 */
            bottom: 20px;
            /* 距离底部20px */
            right: 20px;
            /* 距离右侧20px */
        }

        .control-buttons button {
            margin: 5px;
            padding: 15px;
            font-size: 20px;
            background-color: var(--button-bg-color);
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            color: var(--text-color);
            width: 50px;
            /* 按钮宽度设定 */
            height: 50px;
            /* 按钮高度设定 */
        }

        .control-buttons button:hover {
            background-color: var(--button-hover-bg-color);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <h2>导航栏</h2>
            <a href="#" onclick="go_back()">返回首页</a>
            <a href="#" onclick="open_win()">窗户状态</a>
            <a href="#" onclick="open_msg()">通知中心</a>
            <a href="#" onclick="open_ai_chat()">ai聊天</a>
            <a href="#" onclick="open_audio()">语音提醒</a>
            <a href="#" onclick="open_lost_and_found()">失物招领中心</a>
            <a href="#" onclick="open_video()">小车视频</a>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <img src="./static/imag/logo.png" alt="Logo" class="logo" title="点击切换主题" id="logo_switchTheme">
                <h1>小车视频</h1>
                <div class="user-info">
                    <img src="./static/imag/adm.jpg" alt="User Avatar">
                    <div class="invite-code-popup">
                        用户: {{.username}}<br>邀请码: {{.invitecode}}(禁止外传)
                    </div>
                    <div class="username">用户: {{.username}}</div>
                    <button class="logout-button" onclick="logout()">退出登录</button>
                </div>
            </div>

            <!-- 小车视频播放区域 -->
            <div class="video-container">
                <div style="display: inline-block; align-items: center;">
                    <h2 style="display: inline-block; margin-right: 10px;">小车视频源选择：</h2>
                    <select id="video-source">
                        <option value="http://192.168.1.114">视频源 1</option>
                        <option value="http://192.168.1.123">视频源 2</option>
                        <option value="http://192.168.1.197">视频源 3</option>
                        <option value="http://192.168.1.69">视频源 4</option>
                    </select>
                </div>
                <!-- <video id="video-player" controls>
                    <source src="video1.mp4" type="video/mp4">
                    您的浏览器不支持HTML5视频标签。
                </video> -->
                <img src="./static/imag/no_video_default.png" alt="连接出错" id="video-player" width="640" height="480" />
                <div style="display: flex; justify-content: center;">
                    <button onclick="startVideo()">开始接收视频</button>
                    <button onclick="stopVideo()">停止接收视频</button>
                </div>
            </div>

        </div>
    </div>

    <!-- 控制小车移动按钮 -->
    <div class="control-buttons">
        <h3 style="color: #ffffff;">控制小车移动</h3>
        <div>
            <button onmousedown="move_car('forward')" onmouseup="stop_move_car()" onmouseout="stop_move_car()"
                ontouchstart="move_car('forward')" ontouchend="stop_move_car()">前</button>
        </div>
        <div style="display: flex; align-items: center;">
            <button onmousedown="move_car('left')" onmouseup="stop_move_car()" onmouseout="stop_move_car()"
                ontouchstart="move_car('left')" ontouchend="stop_move_car()">左</button>

            <button onmousedown="stop_move_car()" onmouseup="stop_move_car()" onmouseout="stop_move_car()"
                ontouchstart="stop_move_car()" ontouchend="stop_move_car()" style="color: red;">停</button>

            <button onmousedown="move_car('right')" onmouseup="stop_move_car()" onmouseout="stop_move_car()"
                ontouchstart="move_car('right')" ontouchend="stop_move_car()">右</button>
        </div>
        <div>

            <button onmousedown="move_car('back')" onmouseup="stop_move_car()" onmouseout="stop_move_car()"
                ontouchstart="move_car('back')" ontouchend="stop_move_car()">后</button>
        </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="footer">
        多模态智能校园管理平台
    </div>

    <script src="/static/js/route.js"></script>

    <script>
        direction = "none";
        // const car_ip = '192.168.1.108'
        const car_ip =  window.location.hostname + ':' + window.location.port
        const ws = new WebSocket("wss://" + window.location.hostname + ':' + window.location.port + "/car_video_ws");
        ws.binaryType='blob'
        n = 0;
        ws.onmessage = function (event) {
            console.log(n++)
            if (event.data instanceof Blob) {
                const url = URL.createObjectURL(event.data);
                imag=document.getElementById("video-player")
                imag.src = url;
                imag.onload=()=>URL.revokeObjectURL(imag.src)
            } 
        }
        ws.onclose = function (event) {
            alert("WebSocket 已关闭");
        }
        ws.onerror = function (event) {
            alert("WebSocket 发生错误");
        }

        function move_car(s) {
            direction = s;
            switch (s) {
                case "forward":
                    fetch('https://' + car_ip + '/js?json={"T":1,"L":0.3,"R":0.3}', { mode: 'no-cors' })
                    break;
                case "left":
                    fetch('https://' + car_ip + '/js?json={"T":1,"L":-0.48,"R":0.48}', { mode: 'no-cors' })
                    break;
                case "back":
                    fetch('https://' + car_ip + '/js?json={"T":1,"L":-0.3,"R":-0.3}', { mode: 'no-cors' })
                    break;
                case "right":
                    fetch('https://' + car_ip + '/js?json={"T":1,"L":0.48,"R":-0.48}', { mode: 'no-cors' })
                    break;
            }
            move_car_loop();
        }
        function move_car_loop() {
            console.log(direction);
            if (direction == "none") {
                fetch('https://' + car_ip + '/js?json={"T":1,"L":0,"R":0}', { mode: 'no-cors' })
                return;
            }
            switch (direction) {
                case "forward":
                    fetch('https://' + car_ip + '/js?json={"T":1,"L":0.3,"R":0.3}', { mode: 'no-cors' })
                    break;
                case "left":
                    fetch('https://' + car_ip + '/js?json={"T":1,"L":-0.48,"R":0.48}', { mode: 'no-cors' })
                    break;
                case "back":
                    fetch('https://' + car_ip + '/js?json={"T":1,"L":-0.3,"R":-0.3}', { mode: 'no-cors' })
                    break;
                case "right":
                    fetch('https://' + car_ip + '/js?json={"T":1,"L":0.48,"R":-0.48}', { mode: 'no-cors' })
                    break;
            }
            setTimeout(move_car_loop, 600)
        }
        function stop_move_car() {
            direction = "none";
            fetch('https://' + car_ip + '/js?json={"T":1,"L":0,"R":0}', { mode: 'no-cors' })
        }

    </script>
</body>

</html>